<template>
	<view class="container">
		<u-image width="100%" height="520rpx" :src="topImg"></u-image>
		<view class="back" @click="quit">
			<u-image :src="back" width="40rpx" height="40rpx"></u-image>
		</view>
		<view class="login_box">
			<view class="phone" :class="{'input_active':phoneFocus}">
				<u-input v-model="phone" type="number" :custom-style="textFont" @focus="phoneFocus=true"
					@blur="phoneFocus=false" placeholder="请输入手机号" />
			</view>
			<view class="code">
				<view class="code_input" :class="{'input_active':imgCodeFocus}">
					<u-input v-model="auth" :custom-style="textFont" @focus="imgCodeFocus=true"
						@blur="imgCodeFocus=false" type="number" placeholder="请输入图形验证码" />
				</view>
				<view class="code_img" @click="getAuthImg()">
					<!-- 320 * 120 -->
					<u-image width="300rpx" height="90rpx" :src="imgAuth"></u-image>
				</view>
			</view>
			<view class="message">
				<view class="number" :class="{'input_active':codeFocus}">
					<u-input v-model="code" :custom-style="textFont" @focus="codeFocus=true" @blur="codeFocus=false"
						:clearable="false" type="number" placeholder="请输入短信验证码" />
				</view>
				<!-- <view class="getNumber"  @click="getBackCode" v-if="">
					获取验证码 
				</view> -->
				<view class="getNumber">
					<view class="">

					</view>
					<view :class="{count:lastTime !== 0 && lastTime !==60}" @click="$u.throttle(getBackCode, 3000) ">
						{{lastTime > 0 && lastTime !== 60 ? lastTime+'s后重新获取' : '获取验证码' }}
					</view>
				</view>
			</view>
			<view class="agree">
				<view class="agree_box">
					<view class="">
						<!-- <u-checkbox-group> -->
						<u-checkbox v-model="agree" shape="circle" active-color="#4DC0D9"></u-checkbox>
						<!-- </u-checkbox-group> -->
					</view>
					<view class="" @click="agree = !agree">
						我已阅读并同意
					</view>
					<view class="xieyi" @click="goPotocol">
						《用户协议》<span style="color: #999999;">和</span>
					</view>
					<view class="yinsi" @click="goSecret">
						《隐私政策》
					</view>
				</view>
			</view>
			<view class="login_button" @click="login">
				<view class="login_but_style" v-if="!actives">
					登录
				</view>
				<view class="login_but_style active" v-if="actives">
					登录
				</view>
			</view>
		</view>
		<view class="alert">
			<u-modal v-model="show" :show-title="false" :content="content" confirm-text="立即联系" cancel-text="我知道了"
				cancel-color="#333333" :show-cancel-button="true" confirm-color="#4DC0D9" @confirm="confirm"
				@cancel="cancel" :cancel-style="{'borderRight':'1px solid #f8f8f8'}">
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
		</view>
		<view>
			<u-action-sheet :list="list" v-model="shall" border-radius="30" :safe-area-inset-bottom="true"
				@click="shallBorad"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	// import wx from "@/js_sdk/jweixin-module";
	import {
		getAuthCode,
		getCode,
		postLogin,
		getInfo,
		PicList,
		authTwo
	} from '@/api/login.js'
	import {
		getUserCorpIdAndAgentId
	} from '@/api/index.js'

	import {
		baseURL,
		suiteIds
	} from '../../config/app'
	import {
		servicePhone
	} from '@/config/app.js'
	export default {
		data() {
			return {
				//topImg: require('@/static/img/login_top.png'),
				onceFlag: true,
				textFont: {
					'fontSize': '32rpx'
				},
				phoneFocus: false,
				imgCodeFocus: false,
				codeFocus: false,
				topImg: '',
				back: require('@/static/img/back.png'),
				phone: '', //手机号
				auth: '', //图像验证码
				code: '', //短信验证码
				imgAuth: '',
				uuid: '', //图像验证码UUID
				lastTime: 60,
				countdown: null,
				loginParams: {
					//wxQyLoginCode: '',
					phoneNumber: '',
					smsCode: '',
					uuid: '',
					userInfoCode: '', //回调js code
					code: '', //图像验证码
					//corpId: '',
					//openUserid: '',
					//userId: '',
				},
				agree: false,
				customStyle: {
					//marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					//color:'#4DC0D9';
				},
				show: false,
				shall: false, //分享显示
				content: `暂无权限，请联系平台运营助理帮 您开通：${servicePhone}`,
				list: [{
					text: `当前电话号码是：${servicePhone}`,
					color: '#666666',
					fontSize: 30,
					// subText: '感谢您的点赞'
				}, {
					text: '呼叫',
					color: '#4DC0D9',
					fontSize: 32,
				}, {
					text: '复制号码',
					color: '#333333',
					fontSize: 32,
				}],
				flag: false,
			}
		},
		computed: {
			actives() {
				if (this.phone.length == 11 && this.auth.length > 0 &&
					this.code.length == 6 && this.agree) {
					return true
				}
				return false
			}
		},
		onReady() {
			this.getLocal()
		},
		// onBackPress(options) {
		// 	if (options.from === 'navigationBar') {
		// 		// 来自导航栏的返回按钮
		// 		// 在这里处理你的逻辑
		// 		alert('返回键点击，来自导航栏');
		// 		// 返回 true 表示阻止默认行为，返回 false 则不阻止
		// 		return true;
		// 	}
		// 	// 其他场景的返回键处理可以在这里添加条件分支
		// 	// ...
		// 	// 默认返回 false，不阻止事件继续传播
		// 	alert('其他场景的返回键');
		// 	return false;
		// },
		// onUnload() {
		//     uni.navigateBack({
		//       delta: 2 // 返回的页面数
		//     })
		// },
		mounted() {
			this.getAuthImg()
			//this.hasAuth() 
		},
		onLoad(obj) {
			if (obj.userInfoCode) {
				this.loginParams.userInfoCode = obj.userInfoCode
				uni.setStorageSync('userInfoCode', obj.userInfoCode)
				//	this.getConfig()
			} else {
				// uni.redirectTo({
				// 	url: '/pages/login/auth'
				// })
			}
			//this.H5Login()
		},
		methods: {
			async getConfig() {
				let code = {
					userInfoCode: ''
				}
				let corpId = ''
				let agentId = ''
				code.userInfoCode = uni.getStorageSync('userInfoCode')
				let res = await getUserCorpIdAndAgentId(code)
				if (res.code == 200) {
					agentId = res.agentId
					corpId = res.corpId
				} else {
					this.$u.toast(res.msg)
				}
				console.log(res, corpId, agentId, 'config');
			},
			quit() {
				// wx.exitMiniProgram({
				// 	success: function(e) {
				// 		console.log(e, 123);
				// 	}
				// })
				uni.switchTab({
					url: '/pages/index/index'
				});
				//this.$u.route('/pages/index/index');
			},
			async getLocal() { //获取缓存
				let res = await PicList()
				let r = res.data.find(v => v.imageDesc == '首页文案')
				if (r) this.topImg = r.imageUrl
				//console.log(r);
			},
			async getAuthImg() {
				//console.log('aaa');
				let res = await getAuthCode()
				// if (res.code == 500) {
				// 	this.$u.toast(res.msg)
				// }
				//console.log(res);
				this.uuid = res.uuid
				//console.log(res);
				this.imgAuth = 'data:image/PNG;base64,' + res.img //base64赋值
			},
			startCountdown() {
				if (this.lastTime !== 60 || this.flag) return
				this.countdown = setInterval(() => {
					if (this.lastTime >= 1) {
						this.flag = true
						this.lastTime--
						//console.log(this.lastTime + " 秒后结束");
					} else {
						clearInterval(this.countdown);
						this.flag = false
						this.lastTime = 60
						console.log("倒计时结束!");
					}
				}, 1000);
			},
			async getBackCode() {
				if (this.phone.length !== 11) {
					this.$u.toast('手机号错误!')
					return
				}
				if (this.auth.length < 1) {
					//console.log(123);
					this.$u.toast('请输入的图形验证码!')
					return
				}
				let params = {
					phoneNumber: this.phone,
					code: this.auth,
					uuid: this.uuid
				}
				// return
				if (this.lastTime !== 60) return

				//console.log(123);

				//this.startCountdown()
				//return
				uni.showLoading({
					title: "加载数据中"
				})
				let res = await getCode(params)
				uni.hideLoading()
				this.$u.toast(res.msg, 2000)
				if (res.code == 500) {
					this.auth = ''
					this.getAuthImg()
				}
				if (res.code == 501) {
					//this.startCountdown()
				}
				if (res.code == 200) {
					this.startCountdown()
				}
				//this.$u.toast(res.data)
				//	console.log(res);
				//	console.log(this.phone);
			},
			Wxcopy() { //复制
				let that = this
				this.$ww.setClipboardData({
					data: `${servicePhone}`,
					success(res) {
						this.$ww.getClipboardData({
							success(res) {
								//console.log(res.data) // data
							}
						})
					}
				})
				this.$ww.getClipboardData({
					success(res) {
						that.$u.toast('复制成功')
						//console.log(res.data)
					}
				})
			},
			makePhone() { //打电话
				this.$ww.makePhoneCall({
					phoneNumber: `${servicePhone}` //仅为示例，并非真实的电话号码
				})
			},
			goPotocol() {
				this.$u.route('/pages/login/protocol');
			},
			goSecret() {
				this.$u.route('/pages/login/secret');
			},
			IsPass() {
				if (this.phone.length !== 11) {
					this.$u.toast('手机号错误')
					return false
				}
				if (this.auth.length < 1) {
					this.$u.toast('请输入的图形验证码!')
					return false
				}
				if (this.code.length !== 6) {
					this.$u.toast('您输入的短信验证码不正确!')
					return false
				}
				if (!this.agree) {
					this.$u.toast('请先勾选同意协议后再进行登录!')
					return false
				}
				return true
			},
			hasAuth() { //判断有没有权限
				this.show = true
			},
			async login() {
				if (!this.IsPass()) return //验证通过
				// this.loginParams.userInfoCode = this.userInfoCode
				this.loginParams.phoneNumber = this.phone
				this.loginParams.smsCode = this.code
				this.loginParams.uuid = this.uuid
				this.loginParams.code = this.auth
				//this.loginParams.corpId = this.corpId
				//const userList = uni.getStorageSync('userinfo')
				// console.log(this.loginParams);
				// return
				uni.showLoading({
					title: "加载数据中"
				})
				// console.log(123);
				// return
				let res = await postLogin(this.loginParams)
				uni.hideLoading()
				if (res.code == 200) {
					//this.$u.toast(res.msg)
					try {
						uni.setStorageSync('token', {
							'token': res.token
						});
					} catch (e) {
						console.log(e);
					}

					// uni.redirectTo({    //测试
					// 	url: '/pages/login/info' //完善信息  //测试
					// });
					// return  //测试
					let info = await getInfo()
					//console.log(info,'info');
					uni.setStorageSync('userinfo', info)
					uni.setStorageSync('isLogin', true) //已登录
					if (info?.user?.nickName !== undefined && info?.user?.nickName) { //有号码说明登录过，不需要跳转到完善信息页面了
						uni.switchTab({
							url: '/pages/index/index'
						});
						return
					}
					//this.hasAuth()  //打电话,复制电话等
					uni.redirectTo({
						url: '/pages/login/info' //完善信息
					});
					//this.$u.route(''); 
				} else {
					clearInterval(this.countdown);
					this.flag = false
					this.lastTime = 60
					this.$u.toast(res.msg, 5000)
					this.getAuthImg()
				}
				//console.log(res);
				//console.log(this.phone,this.auth,this.code,this.agree)
			},
			shallBorad(index) { //1呼叫  2复制号码
				if (index == 1) {
					this.makePhone()
				}
				if (index == 2) {
					this.Wxcopy()
				}
				//console.log(index);
			},
			confirm() { //立即联系
				this.shall = true
				//console.log('confirm');
			},
			cancel() { //我知道了
				//console.log('cancel');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.count {
		color: #C1C1C1 !important;
	}

	::v-deep .u-checkbox__label {
		margin-right: 14rpx !important;
		margin-left: 0 !important;
	}

	.active {
		background-color: #4DC0D9 !important;
	}

	.container {
		//background: yellowgreen;
		position: relative;

		.back {
			position: absolute;
			z-index: 2;
			top: 30px;
			padding-left: 24rpx;
		}


		.login_box {
			position: absolute;
			top: 460rpx;
			background-color: white;
			width: 100%;
			height: 60vh;
			border-radius: 40rpx 40rpx 0px 0px;
			padding: 80rpx 60rpx;

			.phone {
				border-bottom: 1px solid #F8F8F8;
			}

			.input_active {
				border-bottom: 1px solid #4DC0D9;
			}

			.code {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;
				border-bottom: 1px solid #F8F8F8;

				.code_input {}

				.code_img {
					width: 300rpx;
					height: 90rpx;
					//background-color: darkgreen;
					padding-right: 72rpx;
					margin-bottom: 6rpx;
				}
			}

			.message {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F8F8F8;

				//padding-right: 60rpx;
				.number {
					width: 260rpx;
				}

				.getNumber {
					flex: 1;
					text-align: right;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #35C1FF;
					line-height: 38rpx;
					display: flex;
					justify-content: flex-end;

				}
			}

			.agree {
				margin-top: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 32rpx;

				.agree_box {
					display: flex;

					.xieyi {
						color: #4DC0D9;
					}

					.yinsi {
						color: #4DC0D9;
					}
				}
			}

			.login_button {
				margin-top: 60rpx;
				font-size: 32rpx;

				.login_but_style {
					width: 100%;
					height: 84rpx;
					background: #A6DFEC;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
				}
			}
		}

		.alert {

			.slot-content {
				padding: 40rpx 36rpx 40rpx 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
			}
		}
	}
</style>